<template>
  <div>
    <div id="one">
      <div class="tu">
        <img class="tou" src="https://yqz-01a.oss-cn-beijing.aliyuncs.com/83a1f950-af86-4b7d-93da-22936a5a7b93.jpg">
      </div>
      <div class="zi">
        <span class="xin">用户名称：张三</span><br>
        <span class="xin">手机号码：123456</span>
      </div>
    </div>
    <div id="two">
      <div id="wdgd">
        <span id="zi">我的工单</span>
      </div>
      <div>
        <div class="icon">
          <van-icon  id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">维修工单</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">保洁工单</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">运送工单</span>
        </div>
      </div>
    </div>
    <div id="three">
      <div id="wdsq">
        <span id="zi">我的申请</span>
      </div>
      <div>
        <div class="icon">
          <van-icon  id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">运维报修</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">保洁工单</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">运送申请</span>
        </div>
        <div class="icon">
          <van-icon id="tbs" size="20px" color="blue"  name="friends" /><br>
          <span id="zt">住房申请</span>
        </div>
      </div>
    </div>
    <div class="four">
      <span style="float: left;margin-top: 3px;margin-left: 10px">人脸采集</span>
      <van-icon style="float:right;margin-top: 5px" name="arrow" />
    </div>
    <div class="four">
      <span style="float: left;margin-top: 3px;margin-left: 10px">系统设置</span>
      <van-icon style="float:right;margin-top: 5px" name="arrow" />
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="sy" >首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="xx" >消息</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="wd">我的</van-tabbar-item>
    </van-tabbar>
  </div>

</template>

<script>
export default {
  data() {
    return {
      active: 2
    }
  },
  methods:{
    sy(){
      this.$router.push('/')
    },
    xx(){
      this.$router.push('/xiaoxi')
    },
    wd(){
      this.$router.push('/wode')
    }
  }
}
</script>

<style scoped>
.four{
  height: 30px;
  width: 100%;
  margin-top: 10px;
  background-color: #f5f5f5;
  float: left;
}
#one{
  width: 100%;
  margin-left: 40px;
  margin-top: 55px;
  float: left;
}
.tu{
  width: 70px;
  border-radius: 50%;
  float: left;
}
.tou{
  width: 70px;
  border-radius: 50%;
}
.zi{
  margin-left: 10px;
  margin-top: 8px;
  float: left;
}
.xin{
  font-size: 14px;
}
#two{
  width: 100%;
  height: 100px;
  background-color: #f5f5f5;
  margin-top: 15px;
  float: left;
}
#three{
  width: 100%;
  height: 100px;
  background-color: #f5f5f5;
  margin-top: 15px;
  float: left;
}
#wdgd{
  width: 100%;
  height: 30px;
}
#wdsq{
  width: 100%;
  height: 30px;
}
#zt{
  font-size: 12px;
}
#tbs{
  margin-left: 15px;
}
.icon{
  margin-top: 10px;
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 30px;
}
#zi{
  text-align: center;
  line-height: 30px;
  margin-left: 10px;
}
</style>
